<script>
import axios from 'axios';
import * as echarts from "echarts"
export default {
  data() {
    return {
      inputText: '',
      sqlData: [],
      students: [
        {"id": 1, 'name': 'jack', 'no': '1', 'hometown': '上海', 'chineseScore': 86, 'mathScore': 83, 'englishScore': 60},
        {'id': 2, 'name': 'peter', 'no': '2', 'hometown': '河南', 'chineseScore': 60, 'mathScore': 85, 'englishScore': 88}
      ],
      sqlData1: [{"id": 1, "name": "jack", "chineseScore": 100, "mathScore": 90}, {"id": 2, "name": "white", "chineseScore": 90, "mathScore": 80}, {"id": 3, "name": "alex", "chineseScore": 100, "mathScore": 100}, {"id": 4, "name": "betty", "chineseScore": 90, "mathScore": 90}]
    };
  },
  methods: {
    sendRequest() {
      axios.post('http://127.0.0.1:5000/api/msg', { words: this.inputText })
        .then(res => {
          this.sqlData = res.data;
          this.initializeEchart(); // 调用初始化和渲染echarts的方法
          console.log(res);
        })
        .catch(error => {
          console.error(error);
        });
    },
    initializeEchart() {
      let myChart = echarts.init(this.$refs.myChart);
      let fields = Object.keys(this.sqlData[0]); // 获取sqlData中的字段名
      // console.log(fields)
      let xData = this.sqlData.map(item => item[fields[0]]);
      let yData = this.sqlData.map(item => item[fields[1]]);
      
      let option = {
        title: {
          text: "学生成绩可视化"
        },
        xAxis: {
          data: xData,
          type: "category"
        },
        yAxis: {
          // data: yData,
          // type: "category"
        },
        series: [
          {
            name: "销量",
            type: "bar",
            data: yData
          }
        ]
      };
      
      myChart.setOption(option);
    },
  },
}

</script>

<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="200px">
        <el-scrollbar>
          <el-menu :default-openeds="['1', '3']">
            <el-sub-menu index="1">
              <template #title>
                <el-icon><message /></el-icon>版本选择
              </template>
              <el-menu-item-group>
                <el-menu-item index="1-1">简易版</el-menu-item>
                <el-menu-item index="1-2">标准版</el-menu-item>
              </el-menu-item-group>
            </el-sub-menu>
          </el-menu>
        </el-scrollbar>
      </el-aside>
      <el-container>
        <el-header>data_co_polit</el-header>
        <el-main>
          <div>
            <el-table :data="sqlData" ref="table">  //根据后端传来的数据来补上列名
              <el-table-column v-for="(value, key) in sqlData[0]" :key="key" :prop="key" :label="key"></el-table-column>
            </el-table>
          </div>

          <div ref="myChart" id="myChart"></div>

        </el-main>

        <el-footer>
          
          <el-input v-model="inputText" style="width: 1310px; font-size: large" placeholder="请输入自然语言" />
          <el-button type="primary" size="middle" @click="sendRequest">确定</el-button>
        </el-footer>
      </el-container>
    </el-container>
  </div>
</template>





<style>
.el-container {
  height: 50%;
}

.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 50;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  height: calc(100vh - 120px)
}

.el-menu {
  background-color: #d3dce6;
}

#myChart{
  width: 500px;
  height: 500px;
  border: 5px solid blue;
}
</style>
